<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商家入驻</title>
  </head>
  <style>
    body {
      background: #f0f0f0;
      font-size: 0.28rem;
      line-height: 1.67;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
    }

    body {
      font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Helvetica,
        Arial, Heiti SC, Hiragino Sans GB, sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5714285714;
      -webkit-font-smoothing: antialiased;
      color: #222;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    a{
        text-decoration: none;
        font-size: 12px;
        color: #666;
    }

    dl,
    dt,
    li,
    ol,
    p,
    ul {
      list-style: none;
    }

    li {
      display: list-item;
      text-align: -webkit-match-parent;
    }

    div {
      display: block;
    }

    .box1 {
      background-color: #ffd000;
      background-image: linear-gradient(135deg, #ffd000, #ffbd00);
      width: 100%;
      height: 55px;
    }

    .logo {
      width: 980px;
      width: 19.6rem;
      margin: 0px auto;
      height: 1.1rem;
      line-height: 55px;
      line-height: 1.1rem;
    }

    .logo img {
      vertical-align: middle;
      height: 28px;
      position: relative;
      top: 16px;
      left: -312px;
    }

    img {
      border: none;
      overflow-clip-margin: content-box;
      overflow: clip;
    }

    .main {
      background-color: #f7f7f7;
      text-align: center;
      padding: 100px 0;
      padding: 2rem 0;
    }

    .main h2 {
      font-family: FZLTXHKM;
      font-size: 32px;

      color: #666;
      font-weight: 400px;
      letter-spacing: 2px;
      line-height: 1em;
      margin-bottom: 78px;
      margin-bottom: 1.56rem;
    }

    h2 {
      display: block;
      font-size: 1.5em;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }

    .main ul {
      width: 1000px;
      height: 400px;
      margin: 80px auto;
      /* background-color: red; */
    }

    .main ul li {
      display: inline-block;
      width: 152px;
      height: 261px;
      margin: 0 auto;
      padding: 20px;
    overflow: auto;
    overflow: hidden;
     
    }
。
    .main ul li div {
      height: 100px;
      float: left;
      margin-top: 50px; 
      margin-right: 40px;

      /* background-color: red; */
    }
    
    .main ul a {
      display: block;
      text-align: center;
      line-height: 152px;
      /* line-height: 3.04rem;  */
      height: 152px;
      width: 152px;
      /* height: 3.04rem; */
      margin: 0 auto;
      /* margin-bottom: .52rem; */
      font-size: 0;
    }

    ul li {
      list-style: none;
    }

    .kuang {
      width: 152px;
      height: 152px;
      background-position: -2px -2px;
    }

    .yuan {
      width: 100px;
      height: 100px;
      background-image: url(../五图.png);
      background-repeat: no-repeat;
      display: block;
    }
    

    .one {
      width: 100px;
      height: 100px;
      background-position: -2px -158px;
    }

    .two {
      width: 100px;
      height: 100px;
      background-position: -2px -470px;
    }

    .there {
      width: 100px;
      height: 100px;
      background-position: -2px -262px;
    }

    .four {
      width: 100px;
      height: 100px;
      background-position: -2px -574px;
    }

    .five {
      width: 100px;
      height: 100px;
      background-position: -1px -365px;
    }

    .main ul span {
      display: inline-block;
      vertical-align: middle;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      -webkit-transform: scale3d(0.8, 0.8, 0.8);
      transform: scale3d(0.8, 0.8, 0.8);
    }
   

    .main ul p {
      font-size: 12px;

      line-height: 18px;

      text-align: center;
      color: #666;
      margin: 4px 0 0;
      margin: 0.08rem 0 0;
    }

    p {
      width: 160px;
      margin: 0.2rem 0;
      height: 100px;
    }

    strong {
      font-weight: bold;
    }
    /* 下面 */
    .xinwen{
        text-align: center;
    font-family: STHeitiSC-Light;
    padding: 28px 0 13px;


    }
    .banquan{
        text-align: center;
    font-size: 12px;
   
    color: #999;
    font-family: Tahoma;

    }
    .one {
    cursor: pointer;
    transition: all 0.6;
}
.two:hover{
    transform: scale(1.1);
}
.two:hover
 {
    cursor: pointer;
    transition: all 0.6;
}
.there:hover{
    transform: scale(1.1);
}
.there:hover
 {
    cursor: pointer;
    transition: all 0.6;
}
.four:hover{
    transform: scale(1.1);
}
.four {
    cursor: pointer;
    transition: all 0.6;
}
.five:hover{
    transform: scale(1.1);
}
.five {
    cursor: pointer;
    transition: all 0.6;
}
.one:hover{
    transform: scale(1.1);
}
.one {
    cursor: pointer;
    transition: all 0.6;
}
.one:hover{
    transform: scale(1.1);
}
.you{
    position: relative;
    margin: 0px 0px 0px 0px;
}
.xinwen a{ color: #fb7e00;}
  </style>

  <body>
    <!-- 头部导航条 -->
    <div class="root"></div>

    <div class="container">
      <!-- toubu  -->
      <div class="box1">
        <div class="logo"><img src="./美团图片/logo美团商标.png" /></div>
      </div>
      <!-- 中间部分 -->
      <div class="main">
        <h2>请选择适合您的行业</h2>
        <ul>
          <li>
            <a href="" class="yuan kuang"> <span class="yuan one"></span></a>
            <div>
              <strong>美食</strong>
              <p>海量流量、精准营销、助力您的餐厅口碑双丰收</p>
            </div>
          </li>
          <li>
            <a href="" class="yuan kuang"> <span class="yuan two"></span></a>
            <div>
              <strong>外卖</strong>
              <p>美团外卖诚意邀请餐饮类、超市类、药品类商家入驻</p>
            </div>
          </li>
          <li>
            <a href="" class="yuan kuang"> <span class="yuan there"></span></a>
            <div>
              <strong>酒店</strong>
              <p>星美大双平台、轻松助力酒店实现销售、口碑双增长</p>
            </div>
          </li>
          <li class="you">
            <a href="" class="yuan kuang"> <span class="yuan four"></span></a>
            <div>
              <strong>境内旅游</strong>
              <p>
                海量流量、精准营销、深度分析、美团境内度假助力您票量大卖，名利双收
              </p>
            </div>
          </li>
          <li>
            <a href="" class="yuan kuang"> <span class="yuan five"></span></a>
            <div>
              <strong>综合商家</strong>
              <p>娱乐休闲 、丽人、亲子、教育、ktv、家装等商家</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="xinwen"><a href="">关于美团</a><span>|</span><a href="">新闻中心</a></div>
      <div class="banquan"><a href="">&copy;"2023"meituan.com"
      </a></div>
    </div>
  </body>
</html>
